{extend name="common/common" /}

{block name="content"}
<el-card class="box-card">
	<div slot="header">
		<span class="span-primary"><i class="fa fa-list"></i></span>
		操作日志
	</div>
	<div class="el-card-ct">
		<el-form :inline="true" class="search-table-form">
			<el-form-item>
				<el-input
					placeholder="搜索用户名/操作名"
					clearable="true"
					prefix-icon="el-icon-search"
					v-model="searchText">
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-date-picker
					v-model="searchDate"
					type="date"
					placeholder="选择日期"
					format="yyyy 年 MM 月 dd 日"
	 				value-format="yyyy-MM-dd">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="info" plain @click="getTable">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" stripe="true" border>
			<el-table-column align="center" sortable prop="id" label="ID" width="80"></el-table-column>
			<el-table-column align="center" prop="user_name" label="用户名" width="150"></el-table-column>
			<el-table-column align="center" prop="u_id" label="用户ID" width="100"></el-table-column>
			<el-table-column align="center" prop="ip" label="操作IP" width="100"></el-table-column>
			<el-table-column prop="url" label="节点路径"></el-table-column>
			<el-table-column align="center" prop="url_name" label="节点名称" width="150"></el-table-column>
			<el-table-column align="center" sortable prop="c_time" label="操作时间"></el-table-column>
			<el-table-column align="center" prop="params" label="请求参数" width="80">
				<template slot-scope="scope">
					<el-tooltip effect="dark" content="F12 进入 console 查看" open-delay="500" hide-after="1500" placement="bottom">
					<el-button :disabled="is_disabled(scope.row)"
						@click="seeRow(scope.row)" circle
						size="small" plain type="primary"
						icon="fa fa-eye">
					</el-button>
					</el-tooltip>
				</template>
			</el-table-column>
		</el-table>
		<div class="table-page">
			<el-pagination
				@size-change="pageSizeChange"
				@current-change="curPageChange"
				:current-page="pageNumber"
				:page-sizes="[10, 20, 50, 75]"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="tableTotal">
			</el-pagination>
		</div>
	</div>
</el-card>
{/block}

{block name="script"}
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:function(){
		return {
			loading:true,
			tableData:'',
			searchText:'',
			pageSize:10,
			pageNumber:1,
			tableTotal:0,
			editAccessID:0,
			searchDate:''
		}
	},
	mounted:function(){
		this.getTable();
	},
	methods:{
		getTable(){
			this.loading=true;
			$.post('./index',{
				'pageSize':this.pageSize,
				'pageNumber':this.pageNumber,
				'searchText':this.searchText,
				'searchDate':this.searchDate
			},function(res){
				main.loading=false;
				if(res.code == 1){
					main.$message({
			          message: res.msg,
			          type: 'success'
			        });
					main.tableData = res.data.rows;
					main.tableTotal = res.data.total;
				}else{
					main.$notify.error({
						title: '失败',
						message: res.msg,
					});
				}
			})
		},
		pageSizeChange(val) {
			this.pageSize = val;
			this.getTable();
		},
		curPageChange(val) {
			this.pageNumber = val;
			this.getTable();
		},
		is_disabled(row) {
			if(row.params == ""){
				return true;
			}
			return false;
		},
		seeRow(row){
			console.table(row.params.split('{-}'));
		}
	}
})
</script>
{/block}
